<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas 画布案例</title>
    <script type="text/javascript">
      // 在页面加载完成后的函数中，执行函数draw
      function draw() {
        // 获取dom对象
        let canvas1 = document.querySelector("#tutorial");
        let canvas2 = document.querySelector("#tutor");
        console.dir(canvas1);
        // 指定类型
        let ctx = canvas1.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)"
        ctx.fillRect (10,10,55,55)

        ctx.fillStyle = 'rgba(0,0,200,0.5)'
        ctx.fillRect(30,30,55,50)

        // 绘制一个框形
        let ctxp = canvas2.getContext("2d");
        // 绘制一个矩形
        // ctxp.fillRect(25,25,100,100)
        // 清除指定区域，使其透明
        // ctxp.clearRect(45,45,60,60)
        // // 绘制一个边框
        // ctxp.strokeRect(55,55,40,40)
        // top1
        ctxp.beginPath()
        ctxp.moveTo(10,20)
        ctxp.lineTo(15,25)
        ctxp.lineTo(50,25)
        ctxp.lineTo(55,20)
        ctxp.lineTo(50,15)
        ctxp.lineTo(15,15)
        ctxp.fill()
        // left-top 
        ctxp.beginPath()
        ctxp.moveTo(10,25)
        ctxp.lineTo(5,30)
        ctxp.lineTo(5,55)
        ctxp.lineTo(10,60)
        ctxp.lineTo(15,55)
        ctxp.lineTo(15,30)
        ctxp.fill()
        // top2
        ctxp.beginPath()
        ctxp.moveTo(10,65)
        ctxp.lineTo(15,70)
        ctxp.lineTo(50,70)
        ctxp.lineTo(55,65)
        ctxp.lineTo(50,60)
        ctxp.lineTo(15,60)
        ctxp.fill()
        
        // left-bottom
        ctxp.beginPath()
        ctxp.moveTo(10,70)
        ctxp.lineTo(5,75)
        ctxp.lineTo(5,100)
        ctxp.lineTo(10,105)
        ctxp.lineTo(15,100)
        ctxp.lineTo(15,75)
        ctxp.fill()
      }
    </script>
    <style>
      canvas {
        border: 1px solid #f58f98;
      }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150">
      <!-- 当不兼容的时候做处理 -->
      <img src="#" alt="#" />
    </canvas>
    <canvas id="tutor" width="150" height="200">
  </body>
</html>
